<template>
	<view class="zone">
		<Header title="装备奖励"></Header>
		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
			<view class="box1">
				<view class="item">
					<view class="p1">领奖必看</view>
					<view class="p2">天道传是一款完全免费的游戏，游戏装备奖励会根据游戏进程 及平台收益增加或减少，请大家理性看待！</view>
				</view>
				<view class="item">
					<view class="p1">领奖流程</view>
					<view class="p2">登录游戏-创建角色-打到装备<text>(必须自己归属)</text>-联系客服-发放奖励</view>
				</view>
				<view class="item">
					<view class="tabbox">
						<view class="itembox" :class="[tab == 1?'active':'']" @click="tabchange(1)">
							<view class="p3">新区奖励</view>
							<view class="p4">(开区1-9天)</view>
						</view>
						<view class="itembox" :class="[tab == 2?'active':'']" @click="tabchange(2)">
							<view class="p3">老区奖励</view>
							<view class="p4">(开区10-19天)</view>
						</view>
						<view class="itembox" :class="[tab == 3?'active':'']" @click="tabchange(3)">
							<view class="p3">统战区奖励</view>
							<view class="p4">(开区20-29天)</view>
						</view>
						<view class="itembox topnum">
							<view class="p3">敬请期待</view>
						</view>
					</view>
					<view v-show="tab==1">
						<view class="title" v-if="info[0]">新区奖励区服:<text>{{info[0].intro}}</text></view>
						<scroll-view scroll-y class="scrolllist">
							<view class="list">
								<view class="msgbox">
									<view class="p1">10转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x10</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">11转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x20</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">12转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x30</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">13转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x40</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">14转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x50</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">15转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x80</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">16转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x100</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">17转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x150</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">18转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x200</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">19转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x300</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">20转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x400</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">21转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x500</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">22转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x600</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">23转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x700</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">24转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x800</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">25转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x900</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">26转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x1000</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">27转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x1100</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">28转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x1200</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">29转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x1300</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">30转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x1400</view>
									</view>
								</view>
							</view>

						</scroll-view>
					</view>


					<view v-show="tab==2">
						<view class="title" v-if="info[1]">老区奖励区服:<text>{{info[1].intro}}</text></view>
						<scroll-view scroll-y class="scrolllist">

							<view class="list">
								<view class="msgbox">
									<view class="p1">13转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x10</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">14转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x20</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">15转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x30</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">16转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x40</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">17转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x50</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">18转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x80</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">19转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x100</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">20转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x150</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">21转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x200</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">22转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x300</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">23转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x400</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">24转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x500</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">25转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x600</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">26转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x700</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">27转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x800</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">28转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x900</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">29转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x1000</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">30转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x1100</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>


					<view v-show="tab==3">
						<view class="title" v-if="info[2]">统战区奖励区服:<text>{{info[2].intro}}</text></view>
						<scroll-view scroll-y class="scrolllist">
							<view class="list">
								<view class="msgbox">
									<view class="p1">17转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x30</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">18转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x40</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">19转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x50</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">20转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x80</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">21转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x100</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">22转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x150</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">23转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x200</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">24转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x300</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">25转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x400</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">26转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x500</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">27转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x600</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">28转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x700</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">29转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x800</view>
									</view>
								</view>
							</view>
							<view class="list">
								<view class="msgbox">
									<view class="p1">30转装备</view>
									<view class="p2">
										<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
											mode="widthFix"></image>
										<view class="num">x900</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab: 1,
				info: [],
			};
		},
		onLoad() {
			this.getQufu()
		},
		methods: {
			async getQufu() {
				let res = await this.$http.index.configgamearea()
				if (res.code == 1) {
					this.info = res.data
				}
			},
			tabchange(id) {
				this.tab = id
			},
		},
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.main {
		width: 100%;
		position: relative;
		margin-top: 10px;

		.yun {
			position: absolute;
			top: -3%;
			left: 0;
			width: 44%;
			z-index: 9;
		}

		.ping1 {
			width: 100%;
			display: flex;
		}

		.box1 {
			position: relative;
			height: calc(100vh - 97px);
			overflow-y: scroll;
			background-color: #ffffff;
			padding: 10px 6px 0;
		}
	}

	.item {
		border: 4px solid #d2bdc6;
		padding: 10px 5px;
		color: #333333;
		margin-bottom: 10px;

		.p1 {
			font-size: 18px;
		}

		.p2 {
			font-size: 12px;
			margin-top: 5px;

			text {
				color: #FF3399;
			}
		}
	}

	.tabbox {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		padding: 5px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.itembox {
			width: 24%;
			text-align: center;
			background: url(http://image.qxgm.site/tdz/img/tk/3.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding: 3px 2px;
			box-sizing: border-box;

			.p3 {
				color: #FFFED0;
				font-size: 12px;
			}

			.p4 {
				color: #FFFED0;
				font-size: 10px;
			}
		}

		.topnum {
			padding-top: 10px;
		}

		.active {
			background: url(http://image.qxgm.site/tdz/img/tk/2.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.p3 {
				color: #A97D45;
			}

			.p4 {
				color: #A97D45;
			}
		}
	}

	.title {
		font-size: 12px;
		color: #333333;

		text {
			color: #FF3399;
		}
	}

	.scrolllist {
		height: calc(100vh - 380px);
		overflow-y: scroll;
		margin-top: 5px;

		.msgbox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
			background-size: 100% 100%;
			padding: 10px 0px;
			box-sizing: border-box;
			margin-bottom: 5px;

			.p1 {
				width: 40%;
				text-align: center;
				font-size: 16px;
			}

			.p2 {
				width: 40%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 16px;

				image {
					width: 22%;
				}
			}
		}
	}
</style>